<template>
  <div class="joe_main">
    <div class="joe_wallpaper__type">
      <div class="joe_wallpaper__type-title">分类</div>
      <ul class="joe_wallpaper__type-list">
        <template v-for="item in sortStatisticsData">
          <router-link
            :to="'/articleSortList/'+item.id"
          >
            <li class="item animated swing" data-cid="36">{{ item.name }}
              {{ item.value }}
            </li>
          </router-link>
        </template>
      </ul>
    </div>
    <div class="joe_census__filing">
      <div class="content">
        <div ref="sortPieChart" style="width:100%;height: 600px"/>
      </div>
    </div>

  </div>
</template>

<script>
import echarts from 'echarts'
import {getAction} from '@/api/manage'

export default {
  name: 'ArticleSort',
  data() {
    return {
      chart: null,
      url: {
        sortStatisticsChart: '/articleView/sortStatisticsChart'
      },
      sortStatisticsData: []
    }
  },
  mounted() {
    this.getSortStatisticsChart()
  },
  methods: {
    getSortStatisticsChart() {
      getAction(this.url.sortStatisticsChart, {}).then(res => {
        if (res.success) {
          this.sortStatisticsData = res.result
          this.initChart(res.result)
        }
      })
    },
    initChart(data) {
      this.chart = echarts.init(this.$refs.sortPieChart)
      const option = {
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        legend: {
          top: 'top'
        },
        tooltip: {
          trigger: 'item',
          // 提示框的数据样式显示
          formatter: '{b}：{c} ({d}%)'
        },
        /*
        * toolbox为工具栏；提供导出图片，数据转化，动态数据等信息
        */
        toolbox: {
          show: true, // 是否显示工具栏组件
          feature: {
            // 启用的动态数据类型
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            // 配置项还原
            restore: {
              show: true
            }
          }
        },
        series: [
          {
            name: '分类',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },

            data: data
          }
        ]
      }
      this.chart.setOption(option)
      let _this = this
      // 浏览器大小改变时重置大小
      window.onresize = function () {
        _this.chart.resize()
      }

      // 容器大小改变时重置大小
      this.$nextTick(() => {
        _this.chart.resize()
      })
    }
  }
}
</script>

<style scoped>
.sort-div {
  border-radius: 4px;
  margin: 4px 8px;
  float: left;
  padding: 5px 8px;
  box-shadow: 2px 2px 20px 5px rgba(158, 158, 158, 0.32);
  color: #5a5e66;
}

.sort-div:hover {
  color: #409eff;
}
</style>
